<template>
    <div class="SummaryInfo">
        <p class="custName flex_c_line">
            {{ custInfo.custName }}
            <span class="code"><span class="label">统一社会信用代码：</span>{{ custInfo.creditNo }}</span>
        </p>
        <span class="upTime">数据更新时间：{{ custInfo.updateTime }}</span>
        <div class="tag_box">
            <DictTag :options="custTag" :value="custTagValues"/>
        </div>
        <el-form class="custom-form" :model="custInfo" label-width="180px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="统一社会信用代码" prop="creditNo">
                        <el-input v-model="custInfo.creditNo" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="注册地址" prop="address">
                        <el-input v-model="custInfo.address" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户状态" prop="khzt">
                        <el-input v-model="custInfo.khzt" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公司类型" prop="gslx">
                        <el-select v-model="custInfo.gslx" disabled>
                            <el-option v-for="dict in gslxOption" :key="dict.value" :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属行业" prop="sshy">
                        <el-select v-model="custInfo.sshy" disabled>
                            <el-option v-for="dict in sshyOption" :key="dict.value" :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所在省/市/区县" prop="city">
                        <el-input v-model="custInfo.city" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="法定代表人名称" prop="fddbrmc">
                        <el-input v-model="custInfo.fddbrmc" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户别名" prop="khbm">
                        <div class="flex_c" style="width: 100%;">
                            <el-input v-model="custInfo.khbm" disabled/>
                            <el-button type="primary" @click="clientAliasNameVisible = true" class="ml10" plain>查看</el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog v-model="clientAliasNameVisible" title="客户别名" width="60%" append-to-body>
            <el-form class="custom-form" :inline="true" :model="clientAliasNameForm" label-width="120px">
                <el-form-item label="系统模块" prop="custName">
                    <el-input disabled v-model="clientAliasNameForm.custName" style="width: 200px;"/>
                </el-form-item>
                <el-form-item label="系统模块" prop="certType">
                    <el-input disabled v-model="clientAliasNameForm.certType" style="width: 200px;"/>
                </el-form-item>
                <el-form-item label="系统模块" prop="certNo">
                    <el-input disabled v-model="clientAliasNameForm.certNo" style="width: 200px;"/>
                </el-form-item>
            </el-form>
            <el-table :data="tableList" >
                <el-table-column label="别名名称" prop="clientAliasName" min-width="100" show-overflow-tooltip align="center"/>
                <el-table-column label="VIP编码" prop="vipCode" min-width="100" show-overflow-tooltip align="center"/>
                <el-table-column label="创建时间" prop="createTime" min-width="100" show-overflow-tooltip align="center"/>
                <el-table-column label="创建人" prop="createName" min-width="100" show-overflow-tooltip align="center"/>
                <el-table-column label="生效时间" prop="startTime" min-width="100" show-overflow-tooltip align="center"/>
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup name="SummaryInfo">
import { reactive } from 'vue';

const props = defineProps({
    custInfo: {
        type: Object,
        default: {}
    }
})
const gslxOption = [{label: '股份有限公司', value: '1'}]
const sshyOption = [{label: '建筑业/房屋建筑业/住宅房屋建筑业', value: '1'}]
const custTagValues = ['1','2','3','4','5']
const custTag = [
    {label: '存量客户', value: '1'},
    {label: '上市公司', value: '2'},
    {label: '合作10年以上', value: '3'},
    {label: '全国500强', value: '4'},
    {label: '团车', value: '5'},
]

const clientAliasNameVisible = ref(false)
const clientAliasNameForm = ref({
    custName: "苏州市轨道交通集团有限公司",
    certType: "统一社会信用代码",
    certNo: "91321452387632478",
})
const tableList = reactive([
    {
        clientAliasName: "苏州市轨道交通",
        vipCode: "V0A000000000001",
        createTime: "2024-05-30 17:11:23",
        createName: "王丽丽",
        startTime: "2024-05-30 17:11:23",
    },
    {
        clientAliasName: "苏州市轨道交通",
        vipCode: "V0A000000000001",
        createTime: "2024-05-30 17:11:23",
        createName: "王丽丽",
        startTime: "2024-05-30 17:11:23",
    },
    {
        clientAliasName: "苏州市轨道交通",
        vipCode: "V0A000000000001",
        createTime: "2024-05-30 17:11:23",
        createName: "王丽丽",
        startTime: "2024-05-30 17:11:23",
    },
])
</script>

<style lang="scss" scoped>
.SummaryInfo{
    .upTime{
        color: gray;
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .custName{
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        align-items: flex-end;
        color: #3A71A8;
        margin-bottom: 20px;
        .code{
            color: gray;
            font-size: 14px;
            font-weight: 400;
            margin-left: 20px;
            .label{
                font-weight: 500;
            }
        }
    }
    .tag_box{
        margin: 0 100px 20px;
    }
}
</style>